<template>
  <div class="box5">
    <div class="title">
      <p>未来七天游客数量趋势图</p>
      <img src="../../images/dataScreen-title.png" alt="">
    </div>
    <div class="charts" ref="line"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import {ref,onMounted} from 'vue'
// 获取图形图表的节点
let line = ref()
onMounted(()=>{
  let mycharts = echarts.init(line.value)
  mycharts.setOption({
    // 标题组件
   /*  title:{
      text:'访问量',
      top:20,
      textStyle:{
        color:'white',
      }
    }, */
    // x|y轴
    xAxis:{
      type:'category',
      // 两侧不留白
      boundaryGap:false,
      // 分割线
      splitLine:{
        show:false,
      },
      data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
      // 轴线的设置
      axisLine:{
        show:true,
      },
      // 轴线刻度
      axisTick:{
        show:true
      }
    },
    yAxis:{
      // 分割线
      splitLine:{
        show:false
      },
      // 轴线的设置
      axisLine:{
        show:true,
      },
      // 轴线刻度
      axisTick:{
        show:true
      }
    },
    grid:{
      top:10,
      left:40,
      right:20,
      bottom:20
    },
    //系列
    series:[
      {
        type:'line',
        data:[120,1240,66,2299,321,890,1200],
        // 平滑曲线的设置
        smooth:true,
        // 区域填充样式
        areaStyle:{
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#6D5B3E' // 0% 处的颜色
            }, {
                offset: 1, color: '#141B4F' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        }
      }
    ]
  })
})
</script>

<style scoped lang="scss">
.box5{
  width:100%;
  height:100%;
  background:url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size:100% 100%;
  margin:0 20px;
  .title{
    height:60px;
    p{
      color:white;
      font-size:20px;
    }
  }
  .charts{
    height:calc(100% - 60px);
  }
}
</style>